<!--
 * @Author: WangZhiYu <w19165802736@163.com>
 * @Date: 2025-04-19 22:37:51
 * @LastEditTime: 2025-04-22 13:51:11
 * @LastEditors: WangZhiYu <w19165802736@163.com>
 * @Descripttion:
-->
<template>
  <div class="share1">
    <div class="share1-header">
      <!-- <img class="share1Logo" src="@/assets/img/shareLogo.png" alt="" /> -->
      <span>{{ projectName }}</span>
    </div>
    <div class="share1-body">
      <video ref="videoRef" width="100%" :src="videoUrl" class="video" controls></video>
    </div>
    <div class="videoList">
      <!-- tab页签 -->
      <!-- <div class="videoTab">
        <div :class="`tabItem ${item.ID === currentProject ? 'activeTab' : ''}`" v-for="item in videoData" :key="item.ID" @click="changeTag(item.ID)">{{ item.name }}</div>
      </div> -->
      <!-- tab页签下面的所有视频 -->
      <div class="videoContent">
        <div :class="`videoContentItem ${i === currentVideoIndex ? 'activeVideo' : ''}`"
             v-for="(item, i) in tagVideoData.items" @click="changeVideo(i)">
          <img :src="item.videoUrl ? item.videoUrl + '?x-oss-process=video/snapshot,t_1,m_fast' : ''" alt=""
               class="tuimg"/>
          <div class="user">
            <span class="userName">{{ item.name }}</span>
            <i class="customIcon el-icon-download" @click="download"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {SystemMangeAPI} from '@/api/SystemMange';

export default {
  data() {
    return {
      isPause: true,
      videoData: [],
      currentProject: null,
      currentVideoIndex: 0,
      videoUrl: '',
      projectName: '',
    };
  },
  created() {
    console.log('123');
    try {
      this.videoData = Object.values(this.$route.query);
      this.videoData.forEach(item => {
        if (typeof item === 'string') throw '获取数据错误';
      });
    } catch (error) {
      console.log(error, 'error');
      const localItem = localStorage.getItem('videoData2');
      if (localItem) {
        this.videoData = JSON.parse(localItem);
      }
    }
    localStorage.setItem('videoData2', JSON.stringify(this.videoData));
    console.log(this.videoData, 'this.videoData');
    this.projectName = this.$route.params.name;
    if (this.videoData[0]) {
      this.currentProject = this.videoData[0].ID;
    }
  },
  methods: {
    async download() {
      console.log(this.tagVideoData.items[this.currentVideoIndex])
      const confirmed = window.confirm(this.$t('message.confirmDownload')+`：${this.tagVideoData.items[this.currentVideoIndex].name}？`);
      if (!confirmed) return;
      // 下载视频
      const url = this.tagVideoData.items[this.currentVideoIndex].videoUrl;
      await this.downloadAliossVideoBlob(url, this.tagVideoData.items[this.currentVideoIndex].name);
    },


    downloadAliossVideoBlob(url, filename = 'video.mp4') {
      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

      if (isSafari) {
        // Safari 无法强制 download，改用新标签页方式
        const a = document.createElement('a');
        a.href = url;
        a.target = '_blank';
        a.rel = 'noopener noreferrer';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      } else {
        // Chrome、Edge、Firefox 支持 download
        const a = document.createElement('a');
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    },
    prevVideo() {
      this.currentVideoIndex = this.currentVideoIndex === 0 ? this.tagVideoData.items.length - 1 : this.currentVideoIndex - 1;
      this.isPause = true;
    },
    nextVideo() {
      this.currentVideoIndex = this.currentVideoIndex === this.tagVideoData.items.length - 1 ? 0 : this.currentVideoIndex + 1;
      this.isPause = true;
    },
    playVideo() {
      this.isPause = !this.isPause;
      this.$refs.videoRef.pause();
    },
    pauseVideo() {
      this.isPause = !this.isPause;
      this.$refs.videoRef.play();
    },
    changeTag(id) {
      this.currentProject = id;
    },
    changeVideo(i) {
      this.isPause = true;
      this.currentVideoIndex = i;
    },
  },
  computed: {
    tagVideoData() {
      const data = this.videoData.find(item => item.ID === this.currentProject);
      this.videoUrl = data.items[this.currentVideoIndex] ? data.items[this.currentVideoIndex].videoUrl : '';
      // 筛选出当前标签下的所有视频数据
      return data;
    },
  },
};
</script>
<style>
.share1 {
  color: #fff;
}

.share1-header {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #30323b;
  box-sizing: border-box;
  line-height: 60px;
}

.share1-header span {
  font-size: 22px;
  margin-left: 10px;
}

.share1-title {
  font-size: 24px;
  text-align: center;
  margin-top: 20px;
}

.video {
  width: 100vw;
  height: 220px;
  background-color: #272727;
}

.share1-body {
  position: absolute;
}

.videoContorl {
  display: flex;
  justify-content: end;
  align-items: center;
  position: absolute;
  padding: 0 20px;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 40px;
  background-color: #5d5b5b;
}

.customIcon {
  font-size: 20px;
}

.videoList {
  margin-top: 57%;
}

.videoTab {
  display: flex;
  width: 100%;
  height: 40px;
  background-color: #7d7b7b;
  color: #fff;
}

.tabItem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 100%;
  border-right: 1px solid #5d5b5b;
}

.activeTab {
  background-color: #a4a0a0;
}

.videoContent {
  height: 60vh;
  overflow: auto;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.videoContentItem {
  position: relative;
  width: 45%;
  height: 100px;
  margin: 10px 0;
}

.videoContentItem img,
.videoContentItem video {
  width: 100%;
  height: 100px;
}

.user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: -2px;
  height: 30px;
  line-height: 30px;
  width: 100%;
  background-color: #6b6a6a;
  padding: 0 10px;
}

.userName {
  width: 80%;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出显示省略号（可选） */
}

.activeVideo {
  border: 2px solid #fff;
  box-sizing: border-box;
}
</style>
